import React, {memo} from 'react'
import {connectComponent} from '../../../store/utils'
import {bindErrorActions} from '../../../store/action/error'
import {mdiAlert} from '@mdi/js'
import {Modal} from '../../../ui/modal/Modal'
import {ModalBody} from '../../../ui/modal/ModalBody'
import Icon from '../../../ui/icon/Icon'
import {Button} from '../../../ui/button/Button'
import {ResponseError} from '../../../../api/ResponseError'

interface ErrorModalProps {
  error: ResponseError
  actions: any
}

const ErrorModal: React.FC<ErrorModalProps> = memo(({error, actions}): React.ReactElement => {
  const closeModal = () => {
    actions.setError(null)
  }

  return (
    <Modal isOpen={!!error} size={'sm'} onClose={closeModal}>
      <ModalBody>
        <h3 className={'mb-primary'}>
          <Icon path={mdiAlert} color={'red'} className={'mr-x2'} />
          Ошибка
        </h3>
        <p className={'mb-primary'}>{error ? error.errorMessage : null}</p>
        <div className={'d-flex justify-content-end'}>
          <Button color={'danger'} style={'outline'} onClick={closeModal}>
            Закрыть
          </Button>
        </div>
      </ModalBody>
    </Modal>
  )
})

export default connectComponent(
  (state, props) => ({
    error: state.error.error,
  }),
  (dispatch) => ({
    actions: bindErrorActions(dispatch),
  }),
  ErrorModal,
)
